<template>
	<div class="card">
		<div class="img-title">
			<img
				src="https://image5.suning.cn/uimg/cms/img/159503841351985726.png"
				alt=""
			/>
		</div>
		<div class="wrap">
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000000146844633.jpg?ver=2165?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/KCf-2m9wCreNhTN2AK0o3Q.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/07/21/20/f599f8941283451a8839911c1f4fbbd2.png?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/FwQcph2f8zAlgubY5zokDQ.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000000146844633.jpg?ver=2165?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/KCf-2m9wCreNhTN2AK0o3Q.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000000146844633.jpg?ver=2165?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/KCf-2m9wCreNhTN2AK0o3Q.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000000146844633.jpg?ver=2165?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/KCf-2m9wCreNhTN2AK0o3Q.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
			<div class="container">
				<div class="title">
					<h1>生活家电</h1>
					<h2>潮流小家电</h2>
				</div>
				<div class="img-show">
					<img
						src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000000146844633.jpg?ver=2165?format=200h_200w_4e"
						alt=""
					/>
					<img
						src="https://imgservice.suning.cn/uimg1/sniss/improve/KCf-2m9wCreNhTN2AK0o3Q.jpg?format=200h_200w_4e"
						alt=""
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "ChannelSquare",
}
</script>

<style lang="less" scoped>
.card {
	background-color: #f2f2f2;
	width: auto;

	.img-title img {
		display: block;
		width: 1200px;
		margin: 0 auto;
	}

	.wrap {
		width: 1200px;
		height: 500px;
		padding-bottom: 10px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #f2f2f2;

		.container {
			width: 390px;
			background-color: #fff;
			margin-right: 10px;
			margin-bottom: 10px;
			.title {
				display: flex;
				height: 60px;
				margin-left: 20px;
				h1 {
					font-size: 26px;
					color: #333;
					text-align: center;
					// line-height: 60px;
					height: 60px;
				}
				h2 {
					font-size: 16px;
					color: #333;
					text-align: center;
					height: 60px;
					margin-top: 28px;
				}
			}
		}
		.img-show {
			display: flex;
			justify-content: space-evenly;
			img {
				display: block;
				width: 165px;
				height: 165px;
			}
		}
	}
}
</style>
